<template>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
		<view class="warehouse">
			<view class="header-title">
				<view class="title-text">
					仓库列表
				</view>
				<image src="@/static/statc-icon/close.png" @click='handleClose' class='closeIconPopup' mode=""></image>

			</view>

			<view class="container-box">
				<checkbox-group class='checkboxGroup' @change="handleChecked">
					<view class="checkbox-warehouse-goods" v-for="item in cangkuList" :key='item.id'>
						<checkbox :checked="voucherWalletIdList.includes(item.id)" :value='item.id'
							borderColor="#151822" color="#fff" backgroundColor="#fff" activeBackgroundColor="#20CC51"
							activeBorderColor="#20CC51" style="transform:scale(0.7)" />

						<view class="leftBox">
							<image :src="item.imageUrl" class='left-warehouse-goods-image' mode=""></image>

							<view class="BoxleftInfo">
								<view class="title-box elliptical1">
									{{item.goodsName}}
								</view>
								<view class="price-box">
									¥{{item.endPrice}}
								</view>
								<view class="tips-box">
									提货券积攒金额：<span class='spalice-price'>￥{{item.availableBalance}}</span>
								</view>
							</view>
						</view>
					</view>

				</checkbox-group>
			</view>

			<view class="bottom-tabber">
				<view class="checkBox">
					<checkbox-group @change="checkboxChangeAll">
						<checkbox :checked="checkedStats" value='true' borderColor="#151822" color="#fff"
							backgroundColor="#fff" activeBackgroundColor="#20CC51" activeBorderColor="#20CC51"
							style="transform:scale(0.8)" />
					</checkbox-group>

					全选
				</view>
				<view class="box">
					合计：
					<view class="price">
						￥{{allAvailableBalance}}
					</view>

					<view class="btn" @click='handleBarterGoods'>
						立即兑换
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		getMyWarehousePage,
		buyVoucherGoods
	} from "@/api/api.js"
	export default {
		name: 'warehouse',
		data() {
			return {
				checkedStats: false,
				cangkuList: [],
				voucherWalletIdList: []
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			price: {
				type: Number,
				default: 0
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.voucherWalletIdList = []
					this.checkedStats = false
					this.$refs.popup.open('bottom');
					this.getMyWarehousePageFun()
				} else {
					this.$refs.popup.close();
				}
			}
		},
		mounted() {
			// this.$refs.popup.open('bottom');
		},
		computed: {
			allAvailableBalance() {
				let date = 0
				let voucherWalletIdList = this.voucherWalletIdList
				this.cangkuList.map(item => {
					if (voucherWalletIdList.includes(item.id)) {
						date += item.availableBalance
					}
				})
				return date.toFixed(2)

			}
		},
		methods: {
			handleClose() {
				this.$refs.popup.close();
				this.$emit('close')
			},
			checkboxChangeAll(e) {
				console.log('checkboxChangeAll', e.detail.value)
				if (e.detail.value.length != 0) {
					// true
					this.voucherWalletIdList = this.cangkuList.map(item => item.id)
				} else {
					// false
					this.voucherWalletIdList = []
				}
			},
			handleChecked(e) {
				console.log('handleChecked', e.detail.value)
				this.voucherWalletIdList = e.detail.value
				// debugger
				if (e.detail.value.length != this.voucherWalletIdList.length) {

					this.checkedStats = false
				} else {
					if (e.detail.value.length == 0) {
						this.checkedStats = false
					} else {
						this.checkedStats = true
					}

				}

			},
			getMyWarehousePageFun() {
				getMyWarehousePage({
					pageNum: 1,
					pageSize: 1000
				}).then(res => {
					console.log('getMyWarehousePage', )
					this.cangkuList = res.data.records
				})
			},
			handleBarterGoods() {
				// buyVoucherGoods({
				// 	"addressId": 0,
				// 	"goodsId": 0,
				// 	"payPassword": "",
				// 	"quantity": 0,
				// 	"remark": "",
				// 	"voucherWalletIdList": []
				// }).then(res => {

				// })
				if (this.voucherWalletIdList.length == 0) {
					uni.showToast({
						title: '请勾选商品',
						icon: "none"
					})
					return
				}
				// if(this.$props.price > )
				this.$emit('sure', JSON.stringify(this.voucherWalletIdList))
			}
		}

	}
</script>

<style lang='less' scoped>
	.warehouse {
		width: 100vw;
		height: 1116rpx;
		background: #fff;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;

		.header-title {
			width: 100vw;
			height: 88rpx;
			background-color: #fff;
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;
			box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.06);
			position: relative;
			padding: 16rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-text {
				font-weight: 600;
				font-size: 36rpx;
				color: #3C3C3C;
				position: relative;
				z-index: 1;

				&:after {
					content: '';
					width: 100%;
					height: 18rpx;
					background: url("@/static/statc-icon/popup-icon-1.png") no-repeat;
					background-size: 100% 100%;
					position: absolute;
					bottom: -10rpx;
					left: 0;
					z-index: 1;
				}

			}

			.closeIconPopup {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				top: 26rpx;
				right: 40rpx;
			}

		}


		.container-box {
			padding: 28rpx 40rpx;
			box-sizing: border-box;

			.checkbox-warehouse-goods {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.leftBox {
					display: flex;
				}

				.left-warehouse-goods-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.BoxleftInfo {
					display: flex;
					flex: 1;
					flex-direction: column;

					.title-box {
						font-weight: 600;
						font-size: 28rpx;
						color: #3C3C3C;
					}


					.price-box {
						font-weight: 600;
						font-size: 24rpx;
						color: #FF3C2D;
						margin-top: 20rpx;
						margin-bottom: 36rpx;
					}

					.tips-box {
						font-weight: 400;
						font-size: 24rpx;
						color: #898989;

						.spalice-price {
							color: #3C3C3C;
						}
					}


				}
			}

		}

		.bottom-tabber {
			width: 100vw;
			height: 108rpx;
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;
			box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.04);
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.checkBox {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #898989;
			}

			.box {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #3C3C3C;

				.price {
					font-weight: 600;
					font-size: 32rpx;
					color: #FF3C2D;
					margin-right: 20rpx;
				}

				.btn {
					width: 216rpx;
					height: 88rpx;
					background: rgb(254, 120, 64);
					background: linear-gradient(180deg, rgba(254, 120, 64, 1) 4%, rgba(252, 54, 95, 1) 100%);
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>